import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Home from '@/views/home'
import Enterprise from '@/views/enterprise'
import Question from '@/views/question'
import Find from '@/views/find'
import My from '@/views/my'
import { getToken } from '@/utils/token.js'
import { Toast } from 'vant'
import store from '@/store/index.js'
import { getUserInfo } from '@/api/User.js'
import { setUserInfo, setIsLogin } from '@/store/index.js'
import EdiUser from '@/views/my/ediUser/index.vue'
import OutShow from '@/views/my/ediUser/outShow.vue'
import Info from '@/views/Info/index.vue'
import skillpage from '@/views/find/skillpage'
import sharepage from '@/views/find/sharepage'
import search from '@/views/find/search'

Vue.use(VueRouter)

const routes = [
  {
    path: '/Login',
    component: Login
  },
  { path: '/', redirect: '/Login' },
  {
    path: '/Home',
    component: Home,
    children: [
      {
        path: 'Enterprise',
        component: Enterprise,
        meta: { needLogin: false, needShow: true }
      },
      {
        path: 'Question',
        component: Question,
        meta: { needLogin: true, needShow: true }
      },
      {
        path: 'Find',
        component: Find,
        meta: { needLogin: false, needShow: true }
      },
      { path: 'My', component: My, meta: { needLogin: true, needShow: true } },
      {
        path: 'EdiUser',
        component: EdiUser,
        meta: { needLogin: true, needShow: false }
      },
      {
        path: 'Info',
        component: Info,
        meta: { needLogin: true, needShow: false }
      },
      {
        path: 'skillpage',
        component: skillpage,
        meta: { needShow: false }
      },
      {
        path: 'sharepage',
        component: sharepage,
        meta: { needShow: false }
      },
      {
        path: 'search',
        component: search,
        meta: { needShow: false }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
// 跳转前导航卫士
router.beforeEach(async (to, from, next) => {
  // 判断路由元信息中的needLogin , 当前页面是否需要登录
  // 不需要登录直接跳转
  if (!to.meta.needLogin) {
    next()
  } else {
    // 需要登录 , 根据获取token判断是否已经登录
    if (getToken()) {
      // 登录之后还有两种状态需要判断 , 就是是否刷新 , 如果登录之后重新刷新页面, 数据会丢失 ,是因为刷新页面之后state中保存的用户信息被清空, 页面获取不到数据就无法渲染
      // 登录之后判断state中的isLogin是否为true , 为true则用户信息还有, 继续执行
      if (store.state.isLogin) {
        next()
        // 如果不为true , 则说明刷新了页面, isLogin和userInfo存储的数据都被清空了 , 则需要根据token重新发起请求获取用户信息并保存到state中 , 重新渲染页面(这里ui为我们单独设置了通过token发起请求获取用户信息的接口)
      } else {
        // 获取到登录后的token
        const res = getToken()
        // 传入token发起请求获取用户信息 , getUserInfo()为api中单独封装的请求
        const newUserInfo = await getUserInfo(res)
        // console.log(newUserInfo)
        // 将用户信息重新保存到state
        store.commit('setUserInfo', newUserInfo.data)
        // 将登录状态修改为true
        store.commit('setIsLogin', true)
        // 继续执行  , 渲染页面
        next()
      }
      // 没有获取到token , 提示用户登录 , 并跳转登录页
    } else {
      // 保存上一次访问的路径记录
      Toast.fail({ message: '请登录', duration: 1000 })
      // console.log(to)
      const thePath = to.fullPath
      router.push(`/login?_redirect=${to.fullPath}`)
    }
  }
})
// 跳转后导航卫士
router.afterEach((to, from, next) => {
  // 跳转后定位到页面顶部
  window.scrollTo(0, 0)
})

export default router
